<!--
  企业招聘管理-自主招聘
 -->
<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-form ref="queryParams" :model="queryParams" size="small" :inline="true">
      <el-form-item label="性别" prop="sex">
        <el-select
          v-model="queryParams.sex"
          placeholder="请选择性别"
          clearable
          size="small"
        >
          <el-option label="不限" value="" />
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input
          v-model="queryParams.startDate"
          type="number"
          style="width: 120px"
          placeholder="岁"
        />
        至
        <el-input
          v-model="queryParams.endDate"
          type="number"
          style="width: 120px"
          placeholder="岁"
        />
      </el-form-item>
      <el-form-item label="居住地" prop="liveCity">
        <el-cascader
          v-model="queryParams.liveCity"
          :show-all-levels="false"
          :options="provinceAndCityData"
          :props="{ value: 'label' }"
          placeholder="请选择城市"
        />
      </el-form-item>
      <el-form-item label-width="120px" label="学生名称" prop="studentName">
        <el-input
          v-model="queryParams.studentName"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        label-width="120px"
        label="求职意向"
        prop="internshipDesire"
      >
        <el-input
          v-model="queryParams.internshipDesire"
          placeholder="支持模糊匹配"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收藏" prop="collectStatus">
        <el-select v-model="queryParams.collectStatus">
          <el-option label="不限" :value="null" />
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="求职状态" prop="jobStatus">
        <el-select v-model="queryParams.jobStatus">
          <el-option label="不限" :value="null" />
          <el-option label="正在实习" value="正在实习" />
          <el-option label="暂无实习" value="暂无实习" />
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="120px"
        label="学校/学历/专业"
        prop="educationalExperience"
      >
        <el-input
          v-model="queryParams.educationalExperience"
          placeholder="支持模糊匹配"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="序号" type="index" />
      <el-table-column label="学生姓名" align="center" prop="studentName" />
      <!-- todo 分析学校 -->
      <el-table-column label="学校" align="center" prop="schoolName" />
      <el-table-column label="性别" align="center" prop="sex" />
      <el-table-column label="年龄" align="center" prop="birthday">
        <template slot-scope="scope">
          {{ getAge(scope.row.birthday) }}
        </template>
      </el-table-column>
      <el-table-column label="所学专业" align="center" prop="major" />
      <el-table-column label="居住地" align="center" prop="liveCity" />
      <el-table-column
        label="学历"
        align="center"
        prop="educationalBackground"
      />
      <el-table-column label="收藏" align="center" prop="collectStatus">
        <template slot-scope="scope">
          {{ ["否", "是"][scope.row.collectStatus] || "否" }}
        </template>
      </el-table-column>
      <el-table-column label="最新备注" align="center" prop="remarks">
        <template slot-scope="scope">
          {{ scope.row.remarks || "--" }}
        </template>
      </el-table-column>
      <el-table-column label="求职状态" align="center" prop="jobStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.jobStatus">{{ scope.row.jobStatus }}/</span>
          <span>{{ scope.row.inJobTime || "--" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleCheckResume(scope.row)"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleInvite(scope.row)"
          >面试邀约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 面试邀约 -->
    <InviteDialog
      ref="inviteDialog"
      @close="getList"
      @submit="createInterview"
      @openReivew="openReivew"
    />
    <!-- 查看简历详情 -->
    <el-drawer
      title="应聘详情"
      size="90%"
      :visible.sync="ResumeReviewDialog"
      direction="rtl"
    >
      <el-tabs v-if="ResumeReviewDialog" v-model="activeName" type="card">
        <el-tab-pane label="学生简历" name="1">
          <ResumeReview
            ref="ResumeReview"
            :is-hava-user-info="true"
            :is-collection="true"
            @saveCollectFun="saveCollectFun"
            @openInvite="openInvite"
          />
        </el-tab-pane>
        <el-tab-pane label="备注列表" name="2">
          <RemarksList
            v-if="activeName == '2'"
            relation-type="4"
            :relation-id="relationId"
          />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
    <CenterDialog v-if="isReview">
      <template #left>
        <div class="left-item">
          <div class="title">
            {{ jobInfo.jobName }}
            <span>{{
              jobInfo.lowestSalary + "-" + jobInfo.highestSalary
            }}元/天</span>
          </div>
          <div class="row">
            <span class="local-icon" />
            <span class="city">{{ jobInfo.city }}</span>
            <span class="small-text">{{ jobInfo.workPeriod }}</span>
            <span class="line" />
            <span class="small-text">{{ jobInfo.practicePeriod }}个月</span>
          </div>
          <div class="row2">
            {{ jobInfo.companyName }} <span class="line" />
            {{ jobInfo.industry }}
          </div>
          <div class="date">
            <span
              class="open"
              @click="linkTo('jobDetail', jobInfo.id)"
            >查看职位详情</span>
            最近操作：{{ jobInfo.publishTime }}
          </div>
        </div>
      </template>
      <template #right>
        <!-- 邀约详情 -->
        <div class="right-detail">
          <div class="right-detailhead">
            邀约详情 <span class="close-icon" @click="isReview = false">x</span>
          </div>
          <div class="right-detail-content">
            <div class="title">
              您好，我们很高兴的通知您来参加我企业的面试。具体安排如下，请准时前来!
            </div>
            <div class="row">
              <div class="left">面试时间</div>
              <div class="right">
                <div class="text">{{ inviteForm.inviteDate }}</div>
              </div>
            </div>
            <div class="row">
              <div class="left">面试方式</div>
              <div class="right">
                <el-checkbox-group v-model="inviteForm.inviteWay">
                  <el-checkbox
                    v-for="item in inviteWay"
                    :key="item.value"
                    disabled
                    :label="item.value"
                  >{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="row">
              <div class="left">面试地点</div>
              <div class="right">
                <div class="address">
                  <span class="position-icon" />
                  {{ inviteForm.inviteAddress }}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="left">其他</div>
              <div class="right">
                <div
                  v-if="inviteForm.inviteContent"
                  class="address"
                  v-html="inviteForm.inviteContent.replace(/\n/gm, '<br>')"
                />
              </div>
            </div>
            <div class="row">
              <div class="left">注意事项</div>
              <div class="right">
                <el-checkbox-group v-model="inviteForm.noticeItem">
                  <el-checkbox
                    v-for="item in attentionEvent"
                    :key="item.value"
                    :label="item.value"
                    disabled
                  >{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div v-if="inviteForm.status == 4" class="row">
              <div class="left">原因</div>
              <div class="right">
                <div
                  v-if="inviteForm.feedback"
                  class="address"
                  v-html="inviteForm.feedback.replace(/\n/gm, '<br>')"
                />
              </div>
            </div>
            <div class="btn-box">
              <div class="btn reject">拒绝邀约</div>
              <div class="btn confirm">确认邀约</div>
            </div>
          </div>
        </div>
      </template>
    </CenterDialog>
  </div>
</template>

<script>
import {
  inviteByCompany,
  getNosendResume,
  getEnterpriseCurriculumVitaePage
} from '@/api/company-admin-api/hireManage/index.js'
import { attentionEvent, inviteWay } from '@/utils/frontDataDict.js'
import { deepClone } from '../../../utils'
import InviteDialog from './components/inviteDialog.vue'
import ResumeReview from '@/components/resumeReview/index.vue'
import RemarksList from '@/components/remarksList/index.vue'

import CenterDialog from './components/centerDialog.vue'
import moment from 'moment'
import { provinceAndCityData } from '@/utils/frontDataDict.js'

export default {
  name: 'Company',
  components: {
    InviteDialog,
    ResumeReview,
    CenterDialog,
    RemarksList
  },
  data() {
    return {
      provinceAndCityData: provinceAndCityData,
      inviteWay: inviteWay,
      attentionEvent: attentionEvent,
      ResumeReviewDialog: false,
      currentResume: null, // 当前要邀请的简历
      list: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      activeName: '1',
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        sex: '', // 性别
        educationalExperience: '', // 教育经历模糊搜索
        startDate: '', // 年龄起始日期
        endDate: '', // 年龄结束日期
        liveCity: [], // 居住地
        collectStatus: null,
        jobStatus: null,
        internshipDesire: '', // 求职意向 模糊匹配
        studentName: '' // 学校/学历/专业 模糊匹配
      },
      relationId: null,
      currentItem: null,
      isReview: false,
      jobInfo: {},
      inviteForm: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    openReivew(jobInfo, inviteForm) {
      this.jobInfo = jobInfo
      this.inviteForm = inviteForm
      this.isReview = true
    },
    openInvite() {
      this.ResumeReviewDialog = false
      this.handleInvite(this.currentItem)
    },
    // 预览职位，获取职位数据
    handleCheckResume(row) {
      this.currentItem = deepClone(row)
      const params = {
        id: row.id
      }
      this.relationId = row.id
      getNosendResume(params).then((res) => {
        if (res.code === 0 && res.data) {
          this.ResumeReviewDialog = true
          setTimeout(() => {
            res.data.relationType = '4'
            res.data.collectStatus = row.collectStatus
            this.$refs.ResumeReview.open(res.data)
          })
        }
      })
    },
    /**
     * @desc 批量创建面试邀约
     * @param {Object} data 面试邀约条件，后续组装到所有的批量数据里
     * @param {Object} jobInfo 被选中的职位数据
     */
    createInterview(data, jobInfo) {
      const newData = deepClone(data)
      const newJobInfo = deepClone(jobInfo)
      const currentResume = deepClone(this.currentResume)
      const interviewItem = {
        city: '', // 城市
        companyId: '', // 企业id
        companyName: '', // 企业名称
        deptId: 0, // 部门id,
        email: '', // 邮箱
        evaluation: '', // 面试评价
        feedback: '', // 学生评价/原因,
        inviteAddress: '', // 面试地址
        inviteContent: '', // 面试描述内容,
        inviteDate: '', // 面试邀约日期
        inviteResult: '', // 原因
        inviteWay: '', // 邀约方式
        jobId: '', // 职位id
        jobName: '', // 职位名称
        noticeItem: '', // 注意事项
        phoneNumber: '', // 手机号
        publisherId: '', // 发布人id
        publisherName: '', // 发布人姓名
        sendRecordId: '', // 发送记录id
        status: '2', // 状态
        studentId: '', // 学生id
        studentName: '', // 学生姓名
        userId: 0, // 用户id
        resumeId: currentResume.id, // 简历id
        lowestSalary: '', // 最低工资
        highestSalary: '', // 最高工资
        practicePeriod: '', // 实习周期
        industry: '', // 行业类型
        workPeriod: '', // 工作周期
        isSendMsg: '0', // 是否发送面试邀约短信提示， '1' 是 ， '0' 否
        isSendEmail: '0' // 是否发送邮件提示
      }
      Object.assign(currentResume, newData, newJobInfo)
      for (const key in interviewItem) {
        if (Object.hasOwnProperty.call(currentResume, key)) {
          interviewItem[key] = currentResume[key]
        }
      }
      interviewItem.companyId = jobInfo.companyId
      interviewItem.jobId = jobInfo.id
      interviewItem.userId = this.currentResume.studentId
      interviewItem.studentId = this.currentResume.studentId
      interviewItem.isSendMsg = interviewItem.isSendMsg ? '1' : '0'
      interviewItem.isSendEmail = interviewItem.isSendEmail ? '1' : '0'
      inviteByCompany(interviewItem).then((res) => {
        if (res.code === 0 && res.data) {
          // this.$refs.inviteDialog.close()
          // this.getList()
          this.$router.push({
            path: '/recruit/jobObjective',
            query: { activeName: '2', studentName: interviewItem.studentName }
          })
        }
      })
    },
    // 打开面试邀约弹窗
    handleInvite(row) {
      this.currentResume = deepClone(row)
      this.$refs.inviteDialog.open()
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 处理查询参数
      const params = JSON.parse(JSON.stringify(this.queryParams))
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (this.queryParams.startDate) {
        const now = new Date().getTime()
        params.endDate = moment(
          now - 1000 * 60 * 60 * 24 * 365 * this.queryParams.startDate
        ).format('yyyy-MM-DD')
        // params.endDate = now - 1000 * 60 * 60 * 24 * 365 * this.queryParams.startDate
      }
      if (this.queryParams.endDate) {
        const now = new Date().getTime()
        params.startDate = moment(
          now - 1000 * 60 * 60 * 24 * 365 * this.queryParams.endDate
        ).format('yyyy-MM-DD')
        // params.startDate = now - 1000 * 60 * 60 * 24 * 365 * this.queryParams.endDate
      }
      if (Array.isArray(params.liveCity) && params.liveCity.length === 2) {
        params.liveCity = params.liveCity[1]
      } else {
        delete params.liveCity
      }
      // 执行查询
      getEnterpriseCurriculumVitaePage(params).then((response) => {
        const list = response.data.list.map((item) => {
          if (
            Array.isArray(item.educationalExperience) &&
            item.educationalExperience.length
          ) {
            const educate = ['大专', '本科', '硕士', '博士']
            educate.map((iten) => {
              const matchEducate = item.educationalExperience.find(
                (single) => single.educationalBackground.indexOf(iten) > -1
              )
              if (matchEducate) {
                item.schoolName = matchEducate.schoolName // 学校名称
                item.major = matchEducate.major // 专业
                item.educationalBackground = iten
                // item.education = iten // 学历
              }
            })
          } else {
            item.schoolName = '--' // 学校名称
            item.major = '--' // 专业
            item.educationalBackground = '--' // 学历
          }
          return item
        })
        this.list = list
        this.total = response.data.total
        this.loading = false
      })
    },
    // 返回年龄
    getAge(birthday) {
      // 出生时间 毫秒
      var birthDayTime = new Date(birthday).getTime()
      // 当前时间 毫秒
      var nowTime = new Date().getTime()
      // 一年毫秒数(365 * 86400000 = 31536000000)
      return Math.floor((nowTime - birthDayTime) / 31536000000)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log('aaa>>>')
      this.queryParams = this.$options.data().queryParams
      this.handleQuery()
    },
    saveCollectFun() {
      this.getList()
    }
  }
}
</script>
<style lang="scss" scope>
.left-item {
  position: relative;
  width: calc(100vw * 520 / 1920);
  min-width: 300px;
  border-radius: 9px;
  background: url("../../../assets/images/user/deliver-bg.png") no-repeat top
    center / cover;
  padding: 40px 25px 25px;
  border: 1px solid #d4d6da;
  cursor: pointer;
  overflow: hidden;

  &:nth-child(3n) {
    margin: 30px 0px 0px 0;
  }

  .title {
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 45px;
    margin-bottom: 22px;

    > span {
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 30px;
      margin-left: 15px;
    }
  }

  .row {
    line-height: 30px;
    margin-bottom: 23px;

    .local-icon {
      display: inline-block;
      width: 20px;
      height: 24px;
      background: url("../../../assets/images/user/local.png") no-repeat center
        center / cover;
      margin-right: 12px;
    }

    .city {
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 30px;
      margin-right: 25px;
    }

    .small-text {
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 30px;
    }

    .line {
      display: inline-block;
      width: 1px;
      height: 14px;
      background: #9597a0;
      margin: 0 20px;
    }
  }

  .row2 {
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #9597a0;
    line-height: 30px;
    margin-bottom: 35px;

    .line {
      display: inline-block;
      width: 1px;
      height: 14px;
      background: #9597a0;
      margin: 0 20px;
    }
  }

  .date {
    line-height: 30px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #c4c4c4;
    text-align: right;

    .open {
      float: left;
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2f8efe;
      line-height: 30px;
    }
  }

  .feedback-tips {
    position: absolute;
    right: 10%;
    bottom: 30%;
    border-radius: 4px;
    border: 1px solid #6fc70f;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #6fc70f;
    line-height: 37px;
    padding: 0 18px;
    transform: rotateZ(-35deg);
  }
}

.right-detail {
  position: relative;
  width: calc(100vw * 920 / 1920);
  min-width: 520px;
  background-color: #fff;

  .right-detailhead {
    position: relative;
    border-bottom: 1px solid #d4d6da;
    line-height: 85px;
    font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #37383d;
    padding-left: 25px;

    .close-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      right: 34px;
      top: 50%;
      margin-top: -11px;
      line-height: 22px;
      color: #b0b0b0;
      font-size: 22px;
      text-align: center;
      cursor: pointer;
    }
  }

  .right-detail-content {
    position: relative;
    width: 100%;
    padding: 38px 45px 60px;

    .title {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      margin-bottom: 25px;
    }

    .row {
      position: relative;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      margin-bottom: 25px;

      .left {
        width: 112px;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 37px;
        text-align: left;
        margin-right: 40px;
      }

      .reject-reason {
        width: 100%;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 37px;
        text-align: left;
        margin-right: 40px;

        span {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #c4c4c4;
          line-height: 28px;
        }
      }

      .right {
        flex: 1;
        overflow: hidden;
        line-height: 37px;

        .text {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 37px;
        }

        .address {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 37px;
          .position-icon {
            position: relative;
            display: inline-block;
            top: 4px;
            width: 24px;
            height: 29px;
            margin-right: 15px;
            background: url("../../../assets/images/position.png") no-repeat
              center center / cover;
            // vertical-align: middle;
          }
        }
      }
    }

    .btn-box {
      position: relative;
      margin-top: 50px;
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      .btn {
        line-height: calc(100vw * 68 / 1920);
        height: calc(100vw * 68 / 1920);
        border-radius: 4px;
        border: 1px solid #4677b9;
        text-align: center;
        padding: 0 calc(100vw * 65 / 1920);
        font-size: calc(100vw * 24 / 1920);
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4677b9;
        margin: 0 calc(100vw * 25 / 1920);
        cursor: pointer;
      }

      .confirm {
        background-color: #4677b9;
        color: #fff;
      }
    }

    .feedback-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }

    .reject-tips {
      position: absolute;
      right: 45px;
      top: 20%;
      border-radius: 4px;
      border: 2px solid rgb(180, 52, 29);
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgb(180, 52, 29);
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }

    .feedback-confirm-tips {
      position: absolute;
      right: 45px;
      bottom: 20%;
      border-radius: 4px;
      border: 2px solid #6fc70f;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #6fc70f;
      line-height: 50px;
      padding: 0 18px;
      transform: rotateZ(-35deg);
      z-index: 1;
    }

    .success-icon {
      display: block;
      width: 160px;
      height: 160px;
      margin: 50px auto 20px;
    }

    .succes-tips {
      font-size: 26px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 37px;
      margin-bottom: 34px;
      text-align: center;
    }

    .safe-icon {
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fc9c21;
      line-height: 30px;
      text-align: center;
      margin-bottom: 14px;
    }

    .safe-tips {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #c4c4c4;
      line-height: 25px;
    }
  }
}
</style>
